<template>
  <div class="system-add-dept-container">
    <el-drawer title="新增认证客户端" v-model="state.showWindows" @close="onCancel">
      <el-form ref="formRef" :model="state.oauthClient" :rules="state.rules" size="small" label-width="30%"
               style="width: 90%">
        <el-form-item label="客户端名称" prop="redirectUris">
          <el-input v-model="state.oauthClient.clientName" placeholder="请输入客户端名称"/>
        </el-form-item>
        <el-form-item label="可访问资源" prop="resourceIds">
          <el-checkbox
              v-model="state.oauthClient.resourceIds"
              v-for="val in state.oauthService"
              :label="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)"
              :key="val.itemName"
              size="large">
            {{val.itemName}}
          </el-checkbox>
        </el-form-item>
        <el-form-item label="授权方式" prop="grantTypes" >
          <el-checkbox
              v-model="state.oauthClient.grantTypes"
              v-for="val in state.oauthType"
              :label="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)"
              :key="val.itemName"
              size="large">
            {{val.itemName}}
          </el-checkbox>
        </el-form-item>
        <el-form-item label="访问域" prop="scopes">
          <el-checkbox
              v-model="state.oauthClient.scopes"
              v-for="val in state.oauthScope"
              :key="val.itemName"
              :label="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)"
              size="large">
            {{val.itemName}}
          </el-checkbox>
        </el-form-item>
        <el-form-item label="授权之后回调地址" prop="redirectUris">
          <el-input v-model="state.oauthClient.redirectUris" placeholder="请输入授权之后回调地址"/>
        </el-form-item>
        <el-form-item label="是否必选" v-if="!isValidString(state.oauthClient.tenantId)">
          <el-switch v-model="state.oauthClient.mandatory"></el-switch>
        </el-form-item>
        <el-form-item label="是否只读" v-if="!isValidString(state.oauthClient.tenantId)">
          <el-switch v-model="state.oauthClient.readonly"></el-switch>
        </el-form-item>
      </el-form>
      <div class="el-drawer__footer">
        <el-button @click="onCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="small">新 增</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import {defineEmits, defineExpose, reactive, ref} from 'vue';
import {addOauthClient} from '/@/api/tenant/oauthClient/index';
import {ElMessage} from 'element-plus';
import {isValidString} from '/@/utils/stringUtils';
import {getDictItemByCode} from "/@/api/sys/dict";

const formRef = ref();
const emit = defineEmits(['initTableData']);

const state = reactive({
  showWindows: false,
  oauthType: [],
  oauthService:[],
  oauthScope:[],
  oauthClient: {
    clientName: '',
    resourceIds: [],
    grantTypes: [],
    scopes: [],
    redirectUris: '',
    mandatory: false,
    readonly: false,
    platform: true,
    tenantId: '',
  },
  rules: {
    resourceIds: [{required: true, message: '请输入可访问资源', trigger: 'blue'}],
    grantTypes: [{required: true, message: '请输入授权方式', trigger: 'blue'}],
    scopes: [{required: true, message: '请输入访问域', trigger: 'blue'}],
    redirectUris: [{required: false, message: '请输入授权之后回调地址', trigger: 'blue'}],
  },
});

//打开添加窗口
const openWindows = (tenantId: any) => {
  state.oauthClient.tenantId = tenantId;
  state.showWindows = true;

  initOauthType()
  initOauthService()
  initOauthScope()
};

//取消
const onCancel = () => {
  formRef.value.resetFields();
  state.showWindows = false;
};

//提交
const onSubmit = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      state.oauthClient.platform = !isValidString(state.oauthClient.tenantId);
      addOauthClient(state.oauthClient).then((res: any) => {
        if (res.code == 200) {
          onCancel();
          emit('initTableData')
        } else {
          ElMessage.error(res.message);
        }
      });
    }
  });
};

defineExpose({
  openWindows,
});

/**
 * 初始化授权方式
 */
const initOauthType =()=>{
  getDictItemByCode("sys.oauth.type").then((res:any)=>{
    state.oauthType = res.data
  });
}

/**
 * 初始化授权的服务
 */
const initOauthService =()=>{
  getDictItemByCode("sys.oauth.service").then((res:any)=>{
    state.oauthService = res.data
  });
}

/**
 * 初始化授权的访问域
 */
const initOauthScope =()=>{
  getDictItemByCode("sys.oauth.scope").then((res:any)=>{
    state.oauthScope = res.data
  });
}
</script>

<style scoped></style>
